<template>
    <div>
        <div>
            <van-nav-bar
                    title="详情"
                    left-text="返回"
                    left-arrow
                    @click-left="tzback()"
            />
        </div>
        <!--        1.图片-->
        <van-image :src="detail.imgurl" width="100%">
        </van-image>
        <!--  2.预约信息  -->
        <div>
            <van-row gutter="20">
                <van-col :span="24">
                    <h2>{{detail.title}}</h2>
                </van-col>
                <van-col :span="24">
                    <label class="l2">咨询日期</label>
                    <label class="l2">工作日</label>
                </van-col>
                <van-col :span="24">
                    <label class="l2">发布时间</label>
                    <label class="l2">{{detail.ctime}}</label>
                </van-col>
                <van-col :span="24"><van-divider /></van-col>

                <van-col :span="24" class="l3">
                    商家留言
                </van-col>
                <van-col :span="24">
                    趁阳光正好，趁微风不燥，趁繁花还未开至荼蘼，让时光定格，留下所有美好。
                </van-col>
            </van-row>
        </div>
        <!--    3.专家介绍-->
        <div style="margin-bottom: 1rem">
            <van-divider>精选留言</van-divider>
            <div>
                <h3>说说：{{this.detail.author}}</h3>
                <p>{{this.detail.content}}</p>
            </div>
        </div>
        <div style="text-align: left">
            <span style="color: orange">打分 </span>
            <van-rate v-model="value" icon="like" void-icon="like-o" />
        </div>
    <!--    4.底部-->
    <div style="height: 4rem;">
<!--        <van-action-bar>-->
<!--            <van-action-bar-icon icon="good-job-o" @click="tzchat()" />-->
<!--            <van-action-bar-icon icon="star-o"  @click="tzorders()" />-->
<!--            <van-action-bar-button type="danger" text="立即预约" @click="add()" />-->
<!--        </van-action-bar>-->
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item icon="good-job-o">点赞</van-tabbar-item>
            <van-tabbar-item icon="star-o">收藏</van-tabbar-item>
        </van-tabbar>
<!--        <van-icon name="good-job-o" color="#1989fa" size="2em"/>-->
<!--        <van-icon name="star-o" color="#ee0a24" />-->
    </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import { ref } from 'vue';
    export default {
        name: "PortraitDetail",
        setup() {
            const value = ref(5);
            return { value};
        },
        data(){
            return{
                detail:{},
            }
        },
        mounted() {
            //页面加载，就会执行
            //axios请求后端接口 查询详情
            //获取商品id
            var id=this.$route.query.id;
            this.axios.get("http://localhost:8081/api/portrait/detail.do?id="+id).then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    //成功
                    this.detail=res.data.data;
                }else{
                    //失败
                    Toast('亲，网络异常！');
                }
            })
        },
        methods:{
            tzback(){
                history.back();
            }
        }
    }
</script>

<style scoped>
    .l2{
        margin: 0.4rem;
    }
    .l3{
        font-size: 0.8rem;
        margin: 0.4rem;
    }
    p{
        padding-left: 1rem;
        margin-top: 2rem;
    }
</style>